<template>
  <div>
  <!-- 准备具有宽高的容器 -->
    <el-row>
      <el-col :span="12">
        <div style="width: 500px; height: 500px" ref="line"></div>
      </el-col>

      <el-col :span="12">
        <div style="width: 400px; height: 400px" ref="pie"></div>

        <div style="text-align: left;margin-left: 50px">
          <div style="display: inline-block">
            <span style="font-size: 20px;font-weight: bolder">流量记录 : </span>
          </div>

          <div style="margin-top: 10px;display: inline-block">
            <span>总进入次数 : </span>
            <el-tag type="danger" effect="dark"><span>{{ sum.enterSum }}</span></el-tag>
          </div>

          <div style="margin-top: 10px;margin-left: 95px">
            <span>总离开次数 : </span>
            <el-tag type="danger" effect="dark"><span>{{ sum.leaveSum }}</span></el-tag>
          </div>

          <div style="margin-top: 10px;margin-left: 95px">
            <span>停车总收费 : </span>
            <el-tag type="danger" effect="dark"><span>{{ sum.allExpense }}</span></el-tag>
          </div>
        </div>

      </el-col>


    </el-row>

  </div>
</template>

<script>
const echarts = require("echarts");
export default {
  name: "CarFlow",
  data() {
    return {
      sum:{
        enterSum: '',
        leaveSum: '',
        allExpense: ''
      }
    };
  },

  methods: {
    initCharts() {

      var sumEnter = [];
      var sumLeave = [];

      var sumType =[];

      //x轴显示近7天日期
      var arr = []; //用来存放最近七天的时间
      function getBeforeDate(n) {
        var n = n;
        // console.log(n); //
        var d = new Date();
        var year = d.getFullYear();
        var mon = d.getMonth() + 1;
        var day = d.getDate();
        if (day <= n) {
          if (mon > 1) {
            mon = mon - 1;
          } else {
            year = year - 1;
            mon = 12;
          }
        }
        d.setDate(d.getDate() + n); //很重要，+n取得是前一天的时间
        year = d.getFullYear();
        mon = d.getMonth() + 1;
        day = d.getDate();
        var s =
          (mon < 10 ? "0" + mon : mon) + "-" + (day < 10 ? "0" + day : day);
        return s;
      }
      for (var i = 0; i > -7; i--) {
        arr.push(getBeforeDate(i));
      }

      //创建line实例
      let line = echarts.init(this.$refs.line);

      //请求数据
      this.$axios({
        url: '/getByEnterTime',
      }).then(res => {
        sumEnter = res.data;
        this.$axios({
          url: '/getByLeaveTime'
        }).then(res => {
          sumLeave = res.data
        }).then(()=>{

          //绘制折线图
          line.setOption({
            title: {
              text: "最近七天车辆出入记录",
              subtext: "",
              left: "center",
            },

            tooltip: {},

            xAxis: {
              data:arr.reverse(),
            },
            yAxis:{},

            //绘制折线
            series: [
              //第一条
              {
                name: "Enter",
                type: "line",
                data: sumEnter,
                markPoint: {
                  // 标注图形数据
                  data: [{
                    type: 'max', // 类型
                    symbol: 'pin', // 标志图形类型，默认自动选择（8种类型循环使用，不显示标志图形可设为'none'），默认循环选择类型有：'circle' | 'rectangle' | 'triangle' | 'diamond' |'emptyCircle' | 'emptyRectangle' | 'emptyTriangle' | 'emptyDiamond' 另外，还支持五种更特别的标志图形'heart'（心形）、'droplet'（水滴）、'pin'（标注）、'arrow'（箭头）和'star'（五角星），这并不出现在常规的8类图形中，但无论是在系列级还是数据级上你都可以指定使用，同时，'star' + n（n>=3)可变化出N角星，如指定为'star6'则可以显示6角星
                    name: '最大值'
                  },
                    {
                      type: 'min', // 类型
                      symbol: 'pin',
                      name: '最小值'
                    },
                  ],
                  // 特殊标注文字
                  label: {
                    normal: {
                      show: true,
                      //position: 'top', // 文字位置
                      // 显示的文字
                      formatter: '{b}：{c}',
                    }
                  },
                  // 触发操作
                  tooltip: {
                    show: true, // 是否显示
                    formatter: '{b}：{c}', // 内容格式器 a（系列名称），b（类目值），c（数值）, d（无）
                    trigger: 'item', // 触发类型，默认数据触发，见下图，可选为：'item' | 'axis'
                  },
                },
                //设置平均值线
                markLine: {
                  data: [{
                    type: 'average',
                    name: '平均值',
                    itemStyle: {
                      normal: {
                        color: 'orange'
                      }
                    }
                  }]
                },
                // 折线图圆点
                label: {
                  normal: {
                    show: true,
                    //position: 'bottom', // 文字位置
                    // 显示的文字
                    formatter: '{c}',
                    textStyle: {
                      color: '#000' // 文字颜色
                    }
                  }
                }
              },
              //第二条
              {
                name: 'Leave', // 系列名称
                type: 'line', // 类型：线
                data: sumLeave, // 数据
                //设置点
                markPoint: {
                  // 标注图形数据
                  data: [{
                    type: 'max', // 类型
                    symbol: 'pin', // 标志图形类型，默认自动选择（8种类型循环使用，不显示标志图形可设为'none'），默认循环选择类型有：'circle' | 'rectangle' | 'triangle' | 'diamond' |'emptyCircle' | 'emptyRectangle' | 'emptyTriangle' | 'emptyDiamond' 另外，还支持五种更特别的标志图形'heart'（心形）、'droplet'（水滴）、'pin'（标注）、'arrow'（箭头）和'star'（五角星），这并不出现在常规的8类图形中，但无论是在系列级还是数据级上你都可以指定使用，同时，'star' + n（n>=3)可变化出N角星，如指定为'star6'则可以显示6角星
                    name: '最大值'
                  },
                    {
                      type: 'min', // 类型
                      symbol: 'pin',
                      name: '最小值'
                    },
                  ],
                  // 特殊标注文字
                  label: {
                    normal: {
                      show: true,
                      //position: 'top', // 文字位置
                      // 显示的文字
                      formatter: '{b}：{c}',
                    }
                  },
                  // 触发操作
                  tooltip: {
                    show: true, // 是否显示
                    formatter: '{b}：{c}', // 内容格式器 a（系列名称），b（类目值），c（数值）, d（无）
                    trigger: 'item', // 触发类型，默认数据触发，见下图，可选为：'item' | 'axis'
                  },
                },
                //设置平均值线
                markLine: {
                  data: [{
                    type: 'average',
                    name: '平均值',
                    itemStyle: {
                      normal: {
                        color: 'orange'
                      }
                    }
                  }]
                },
                // 折线图圆点
                label: {
                  normal: {
                    show: true,
                    //position: 'bottom', // 文字位置
                    // 显示的文字
                    formatter: '{c}',
                    textStyle: {
                      color: '#000' // 文字颜色
                    }
                  }
                },
              },

            ]
          })
        })
      })

      //创建pie实例
      let pie = echarts.init(this.$refs.pie);

      //请求数据
      this.$axios({
        url: '/getTypeCount'
      }).then(res => {
        sumType = res.data;
        //绘制扇形图
        pie.setOption({
          //标题
          title: {
            text: "出入车辆类型占比图",
            subtext: "出入类型",
            left: "center",
          },

          //鼠标划过 点击
          tooltip: {
            trigger: "item",
          },
          //图例组件
          legend: {
            orient: "vertical",
            left: "left",
          },
          //系列 一组数值 图标类型
          series: [
            {
              name: "车辆类型",
              type: 'pie',
              radius: "50%",
              data: [
                {value: sumType[0], name: '外来车辆'},
                {value: sumType[1], name: '业主车辆'}
              ],

              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: "rgba(0, 0, 0, 0.5)",
                }
              }
            }
          ]
        })
      })
    },
    getSum() {
      this.$axios({
        url:'/getSum'
      }).then(res => {
        this.sum = res.data
      })
    }
  },
  mounted() {
     this.getSum();
     this.initCharts();
  }
}

</script>

<style scoped>

</style>

